import React, { Component } from 'react';
import "../styles/Suggest.scss"
import { NavBar, Space, JumboTabs } from 'antd-mobile'
import { SearchOutline } from 'antd-mobile-icons'
import * as service from "../api/index"

class Suggest extends Component {
    constructor(props) {
        super(props);
        this.state = {
            right: (
                <div style={{ fontSize: 24 }}>
                    <Space style={{ '--gap': '16px' }}>
                        <SearchOutline />
                    </Space>
                </div>
            ),
            goods:[]
        }
    }
    async componentDidMount(){
        var res = await service.suggestgoods();
        this.setState({goods:res.data})
    }
    render() {
        return (
            <div className='suggest'>
                <NavBar className='navbar' right={this.state.right} onBack={() => { this.props.history.go(-1) }}>种草特辑</NavBar>
                <JumboTabs>
                    <JumboTabs.Tab title='全部' key='/all' />
                    <JumboTabs.Tab title='手机' key='/phone' />
                    <JumboTabs.Tab title='食品' key='/food' />
                    <JumboTabs.Tab title='美妆' key='/makeup' />
                    <JumboTabs.Tab title='生鲜' key='/fresh' />
                    <JumboTabs.Tab title='酒水' key='/alcohol' />
                    <JumboTabs.Tab title='女装' key='/women' />
                    <JumboTabs.Tab title='男装' key='/men' />
                </JumboTabs>
                <div className="list">
                    {
                        this.state.goods.map((item,index)=>{
                            return (
                                <div className="item" key={index}>
                                    <div className="pic">
                                        <img src={item.pic} alt="" />
                                    </div>
                                    <div className="text">{item.text}</div>
                                    <div className="suggester">
                                        <div className="name"><img src={item.pic2} alt="" />{item.name}</div>
                                        <div className="fans">♡ {item.fans}</div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Suggest;